<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>位置变换</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      body {
          /*z-轴效果, 需要配合合适窗口*/
          /*perspective: 1000px;*/
      }

      .box1 {
          width: 100px;
          height: 100px;
          background-color: orange;

          /*translateX 平移*/
          transform: translateX(10px) translateY(20px);

      }

  </style>
</head>
<body>
<!--
  transform:
    1. 百分比值是相对自身的宽高
    2. 变换不会影响其它元素的位置
-->
<div class="box1"></div>
</body>
</html>